import React from "react";
import { useAppDispatch, useAppSelector } from "./app/hooks";
import { addAge, login } from "./app/user/userSlice";

const App = () => {
  const user = useAppSelector((state) => state.user.user);
  const age = useAppSelector((state) => state.user.age);
  const sex = useAppSelector((state) => state.user.sex);
  const list = useAppSelector((state) => state.user.list);
  const dispatch = useAppDispatch();
  return (
    <div>
      <h1>App组件</h1>
      <h2>
        {user}--{age}--{sex}
        <ul>
          {
            list.map((v, i) => {
              return <li key={i}>{v}</li>
            })
          }
        </ul>
      </h2>
      <button onClick={() => dispatch(addAge(1))}>+1</button>
      <button onClick={() => dispatch(addAge(2))}>+2</button>
      <button onClick={() => dispatch(login())}>登录</button>
    </div>
  );
};

export default App;
